<script setup lang="ts">
import BjlInput from '@/components/Game/BjlInput.vue';
import BjlResult from '@/components/Game/BjlResult.vue';
import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { ExcutePlan, RecmInfo, RoundInfo, SummaryInfo } from '@/models/execute/ExecutePlan';
import { nextTick, onMounted, reactive, ref } from 'vue';


const showPredict = ref(['showPredict', 'showResult']);
type ActionSheetOption = {
    name: string;
    value: string;
};

let game: ExcutePlan = new ExcutePlan();
const roundInfo = reactive<RoundInfo>(new RoundInfo());

const setResult = (result: EnumBjlResult) => {
    roundInfo.results.push(result)
    roundInfo.currentResult = result;
    resultInputCompoenent.value.setResult(result);

};

let recmInfo = reactive<RecmInfo>(new RecmInfo());

const initData = () => {
    let newGame = new ExcutePlan();
    Object.assign(game, newGame);
    game.recmStrategy = [

    ];
    game.moneyStrategy = [

    ];

    let newRound = new RoundInfo();
    Object.assign(roundInfo, newRound);

    resultInputCompoenent.value.initData();
    resultComponent.value.initData();
    predictComponent.value.initData();
    //snapShot.splice(0, snapShot.length);
};

onMounted(() => {
    initData();

    nextTick(() => {
        showPredict.value = ['showPredict', 'showResult'];
    });
});

enum EnumSelectType {
    RecmStrategy,
    MoneyStrategy
}


const recmStrategySelect = () => {
    actions.value = [
        {
            name: "跟投策略",
            value: "FollowStrategy"
        },
        {
            name: "固定图形策略",
            value: "ArrayStrategy"
        },
        {
            name: "随机组策略",
            value: "RandomNumStrategy"
        }
    ];
    showModalDlg.value = true;
};

const moneyStrategySelect = () => {
    actions.value = [{
        name: "分组策略",
        value: "GroupMoneyStrategy"
    }];
    showModalDlg.value = true;

};
let selectType: EnumSelectType = EnumSelectType.RecmStrategy;
const actions = ref<Array<ActionSheetOption>>([]);
const showModalDlg = ref(false);
const dlgTitle = ref("");
const onSelect = (item: ActionSheetOption) => {
    console.log(item);
    let it = null;
    switch (selectType) {
        case EnumSelectType.RecmStrategy:

            break;
    }
};

const resultInputCompoenent = ref<any>(null);
const predictComponent = ref<any>(null);
const resultComponent = ref<any>(null);

</script>

<template>
    <van-dialog v-model:show="showModalDlg" :title="dlgTitle" show-cancel-button>
        <van-tabs>
            <van-tab title="跟投模型">
                <FollowStrategyOption />
            </van-tab>
            <van-tab title="固定图形模型">
                <ArrayStrategyOption />
            </van-tab>
        </van-tabs>
    </van-dialog>


    <van-row>
        <van-col :offset="1" :span="23">
            <BjlInput ref="resultInputCompoenent" />
        </van-col>
    </van-row>
    <van-divider :margin="24" style="margin:0;" />

    <van-row class="recm-item">
        <van-col v-if="game.recmInfo.recmV == EnumBjlResult.X" class="recm x" :span="12">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toString()) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>

        <van-col :span="12" v-if="game.recmInfo.recmV == EnumBjlResult.Z" class="recm z">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toString()) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>
    </van-row>

    <van-row>
        <van-col :span="24">
            <van-collapse v-model="showPredict">

                <van-collapse-item name="showPredict">
                    <template #title>
                        <van-button type="primary" @click.stop="recmStrategySelect" size="small">选择模型</van-button>
                    </template>
                    <BjlResult ref="predictComponent" labelName="神预测" />
                </van-collapse-item>
                <van-collapse-item name="showResult">
                    <template #title>
                        <van-button type="primary" @click.stop="moneyStrategySelect" size="small">资金模型</van-button>
                    </template>
                    <BjlResult ref="resultComponent" labelName="运势路" />
                </van-collapse-item>
            </van-collapse>
        </van-col>

    </van-row>

    <van-row class="operate">
        <van-col :span="6">
            <button class="BX" @click="setResult(EnumBjlResult.X)">〇</button>
        </van-col>
        <van-col :span="6">
            <button class="revert">撤销</button>
        </van-col>
        <van-col :span="6">
            <button class="restart">重开</button>
        </van-col>
        <van-col :span="6">
            <button class="BZ" @click="setResult(EnumBjlResult.Z)">〇</button>
        </van-col>
    </van-row>

    <van-row class="recm" style="font-size:16px;">
        <van-col :span="6" offset="2">
            <span style="color:red">{{ recmInfo.summaryInfo.winCount }}</span>
            <span>-</span>
            <span style="color:blue">{{ recmInfo.summaryInfo.failCount }}</span>
        </van-col>
        <van-col :span="4">
            <span v-if="recmInfo.summaryInfo.winCount > recmInfo.summaryInfo.failCount" style="color:red">
                {{ recmInfo.summaryInfo.winCount - recmInfo.summaryInfo.failCount }}
            </span>
            <span v-else-if="recmInfo.summaryInfo.failCount > recmInfo.summaryInfo.winCount" style="color:blue">
                {{ recmInfo.summaryInfo.failCount - recmInfo.summaryInfo.winCount }}
            </span>
            <span v-else>0</span>
        </van-col>
        <van-col :span="4">
            <span
                v-if="recmInfo.summaryInfo.winCount > recmInfo.summaryInfo.failCount && (recmInfo.summaryInfo.winCount + recmInfo.summaryInfo.failCount > 0)"
                style="color:red">
                {{ (recmInfo.summaryInfo.winCount / (recmInfo.summaryInfo.winCount +
                    recmInfo.summaryInfo.failCount)).toFixed(2) }}
            </span>
            <span
                v-else-if="recmInfo.summaryInfo.failCount > recmInfo.summaryInfo.winCount && (recmInfo.summaryInfo.winCount + recmInfo.summaryInfo.failCount > 0)"
                style="color:blue">
                {{ (recmInfo.summaryInfo.winCount / (recmInfo.summaryInfo.winCount +
                    recmInfo.summaryInfo.failCount)).toFixed(2) }}
            </span>
            <span v-else>{{
                (recmInfo.summaryInfo.winCount + recmInfo.summaryInfo.failCount > 0) ? (recmInfo.summaryInfo.winCount /
                    (recmInfo.summaryInfo.winCount +
                        recmInfo.summaryInfo.failCount)).toFixed(2) : 0
            }}</span>
        </van-col>
    </van-row>
</template>

<style scoped>
.st {
    font-size: 16px;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.operate {
    text-align: center;
    height: auto;
    margin: 5px 0;
}

div.Z {
    border: 3px solid red;
}

div.X {
    border: 3px solid blue;
}

div.B {
    border: 3px solid rgb(6, 237, 83);
}

.operate button,
.operate_button button {
    font-size: 12px;
    color: white;
    border: none;
    margin: 5px 15px;
    padding: 10px;
}

.BZ {
    background-color: #ae2a2a;
    color: red !important;
}

.BX {
    background-color: #2a71ae;
    color: blue !important;
}

.BSync {
    background-color: coral;
    color: white;
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}
</style>